<!-- src/components/ButtonGroup/index.vue -->
<template>
  <div
    class="button-group-container"
    :class="[`button-group-${direction}`, { 'has-border': border }]"
    :style="{ gap: spacing }"
  >
    <template v-for="(btn, index) in filteredButtons" :key="index">
      <!-- 普通按钮 -->
      <el-button
        v-if="!btn.dropdown"
        v-bind="getButtonProps(btn)"
        @click="handleClick(btn)"
      >
        <template #icon v-if="btn.icon">
          <component :is="btn.icon" />
        </template>
        {{ getButtonText(btn) }}
      </el-button>

      <!-- 下拉按钮 -->
      <el-dropdown v-else @command="(command) => handleCommand(btn, command)">
        <el-button v-bind="getButtonProps(btn)">
          {{ getButtonText(btn) }}
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              v-for="(item, idx) in btn.items"
              :key="idx"
              :command="item.command"
              :disabled="item.disabled"
            >
              {{ item.label }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </template>
  </div>
</template>
  
  <script setup lang="ts">
import { computed } from "vue";
// import {
//   ElButton,
//   ElDropdown,
//   ElDropdownMenu,
//   ElDropdownItem,
//   ElIcon,
// } from "element-plus";
import type { ButtonProps, ButtonInstance } from "element-plus";
import { useI18n } from "vue-i18n";
import { usePermission } from "@/hooks/usePermission";
import { ArrowDown } from "@element-plus/icons-vue";

type ButtonType =
  | "primary"
  | "success"
  | "warning"
  | "danger"
  | "info"
  | "text";

interface ButtonItem {
  text?: string; // 显示文本
  i18nKey?: string; // 国际化key
  type?: ButtonType;
  icon?: Component; // 图标组件
  permission?: string | string[]; // 权限码
  event?: string | Function; // 触发事件
  loading?: boolean;
  disabled?: boolean;
  dropdown?: boolean; // 是否是下拉按钮
  items?: DropdownItem[]; // 下拉项
  // 支持所有ElButton原生属性
  props?: Partial<ButtonProps>;
}

interface DropdownItem {
  label: string;
  command: string;
  disabled?: boolean;
}

interface Props {
  buttons: ButtonItem[]; // 按钮配置数组
  direction?: "horizontal" | "vertical"; // 排列方向
  spacing?: string; // 间距
  border?: boolean; // 是否显示边框
}

const props = withDefaults(defineProps<Props>(), {
  direction: "horizontal",
  spacing: "12px",
  border: false,
});

const emit = defineEmits<{
  (e: "click", value: { button: ButtonItem; event: Event }): void;
  (e: "command", value: { button: ButtonItem; command: string }): void;
}>();

const { t } = useI18n();
const { hasPermission } = usePermission();

// 过滤权限按钮
const filteredButtons = computed(() => {
  return props.buttons.filter((btn) => {
    if (!btn.permission) return true;
    return hasPermission(btn.permission);
  });
});

// 获取按钮显示文本
const getButtonText = (btn: ButtonItem) => {
  return btn.i18nKey ? t(btn.i18nKey) : btn.text;
};

// 合并按钮属性
const getButtonProps = (btn: ButtonItem) => ({
  type: btn.type || "primary",
  size: "default",
  plain: true,
  ...btn.props,
  loading: btn.loading,
  disabled: btn.disabled,
});

// 按钮点击处理
const handleClick = (btn: ButtonItem, event: Event) => {
  if (typeof btn.event === "string") {
    emit("click", { button: btn, event });
  } else if (typeof btn.event === "function") {
    btn.event(event);
  }
};

// 下拉菜单处理
const handleCommand = (btn: ButtonItem, command: string) => {
  emit("command", { button: btn, command });
};
</script>
  
  <style scoped lang="scss">
.button-group-container {
  display: inline-flex;

  &.button-group-horizontal {
    flex-direction: row;
  }

  &.button-group-vertical {
    flex-direction: column;
  }

  &.has-border {
    padding: 16px;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    border-bottom: 0;
    padding-bottom: 0;
    background-color: #fff;
  }

  :deep(.el-button) {
    margin: 0 !important;
  }
}
</style>